<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改订单</title>
<style type="text/css">
 body{
     font-size:13px;
     line-height:25px;
 }
 table{
     border-top: 1px solid #333;
     border-left: 1px solid #333;
     width:400px;
 }
 td{
     border-right: 1px solid #333;
     border-bottom: 1px solid #333;
     text-align:center;
 }
 .title{	
     font-weight:bold;
     background-color: #cccccc;
 }
 input text{
     width:100px;
 }
 
</style>
<script>
 // 训练要点
 // （1）使用rowIndex和cells访问当前单元格
 // （2）使用innerHTML改变数量显示在文本框中或单元格内
 // （3）使用节点（firstChild、lastChild）访问单元格中的按钮或文本框
 // （4）使用setAttribute改变动态改变事件调用的函数实现表格的修改订单功能

// 实现思路及步骤
//（1）使用innerHTML来改变数量并显示在文本框中。使用lastChild访问最后一个单元格中的“修改”按钮，
// 并改变value值为“确定”，使用setAttribute来改变按钮调用的函数。 
//（2）使用firstChild和value获取当前数量值， 然后使用innerHTML把数量显示在单元格中，
// 同样使用lastChild、value和setAttribute来改变按钮上显示的文本和调用的函数。


</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr id="del1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>&yen;568.50</td>
    <td><input name="rowdel" type="button" value="删除"  />
    <input id="edit1" type="button" value="修改" /></td>
  </tr>
  <tr>
    <td colspan="4" style="height:30px;">
    <input name="addOrder" type="button" value="增加订单" /></td>
  </tr>
</table>
</body>
</html>
